<template>
    <div class="appcontainer">
        <!-- 大图 -->
        <div class="bigimg">
            <div class="inbigimg">
                <div class="bigimgtitle" v-if="language == 'zh'">
                    转录组数据
                </div>
                <div class="bigimgtitle" v-else>Transcriptome Data</div>
                <div class="bigimgtips" v-if="language == 'zh'">
                    提供数据为 GEO 数据库中的四高慢性病相关数据<br>
                    包括数据集介绍、样本数量、平台及分组信息。
                </div>
                <div class="bigimgtips" v-else>
                    Provide data for the four high chronic disease related data in GEO database<br>
                    Including dataset introduction, sample size, platform, and grouping information.
                </div>
                <div class="searchContent1" v-if="language == 'zh'">
                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
                        <el-form-item label="疾病类型" prop="diseases">
                            <el-select v-model="queryParams.diseases" placeholder="请选择" filterable clearable
                                style="width: 200px;">
                                <el-option v-for="item in diseasesList" :key="item.dictValue" :label="item.dictLabel"
                                    :value="item.dictValue">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="研究类型" prop="studyTypes">
                            <el-select v-model="queryParams.studyTypes" placeholder="请选择" filterable
                                style="width: 200px;" :popper-append-to-body="false" popper-class="customDropdown"
                                clearable>
                                <el-option v-for="item in studyTypeList" :key="item.dictValue" :label="item.dictLabel"
                                    :value="item.dictValue">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="关键词搜索" prop="keyWord">
                            <el-input v-model="queryParams.keyWord" placeholder="请输入关键词" clearable
                                @keyup.enter.native="handleQuery" style="width: 200px;" size="small" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                                style="margin-left: 20px;">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="searchContent1" v-else>
                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
                        <el-form-item label="Disease type" prop="diseases">
                            <el-select v-model="queryParams.diseases" placeholder="Please select" filterable clearable
                                style="width: 200px;">
                                <el-option v-for="item in diseasesList" :key="item.dictValue" :label="item.dictLabel"
                                    :value="item.dictValue">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Study type" prop="studyTypes">
                            <el-select v-model="queryParams.studyTypes" placeholder="Please select" filterable
                                style="width: 200px;" :popper-append-to-body="false" popper-class="customDropdown"
                                clearable>
                                <el-option v-for="item in studyTypeList" :key="item.dictValue" :label="item.dictLabel"
                                    :value="item.dictValue">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="keyword search" prop="keyWord">
                            <el-input v-model="queryParams.keyWord" placeholder="Please enter keywords" clearable
                                @keyup.enter.native="handleQuery" style="width: 200px;" size="small" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                                style="margin-left: 20px;">search</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">reset</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <!-- 转录组数据分析 -->
        <div class="botcontent">
            <div class="inbotcontent">
                <div class="zlzsjfx" v-if="language == 'zh'">
                    转录组数据分析
                </div>
                <div class="zlzsjfx" v-else>
                    Transcriptome Data Analysis
                </div>
                <div class="sjfxtips" v-if="language == 'zh'">
                    这里展示了与四种慢性病相关的转录组数据分析结果。您可以浏览、搜索和下载相关数据。
                </div>
                <div class="sjfxtips" v-else>
                    Here are the transcriptome data analysis results related to four chronic diseases. You can browse,
                    search, and download relevant data
                </div>
                <div class="tablecontent" v-if="language == 'zh'">
                    <el-table v-loading="loading" :data="zlresultList" @sort-change="handleSortData" border>
                        <el-table-column label="数据集名称" align="left" header-align="center" prop="title"
                            sortable="custom">
                        </el-table-column>
                        <el-table-column label="数据集介绍" align="left" header-align="center" prop="summary"
                            show-overflow-tooltip sortable="custom">
                            <template slot-scope="scope">
                                <span>{{JSON.parse(scope.row.entity).series.summary}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="样本数量" align="right" header-align="center" prop="samples" width="110"
                            sortable="custom">
                            <template slot-scope="scope">
                                <span style="color: #409EFF;cursor: pointer;"
                                    @click="showDetails(JSON.parse(scope.row.entity).series.samples)">
                                    {{JSON.parse(scope.row.gdsInfo).sample_count}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="平台" align="left" header-align="center" prop="platforms"
                            sortable="custom">
                            <template slot-scope="scope">
                                <span>{{JSON.parse(scope.row.entity).series.platforms+""}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="分组信息" align="left" header-align="center" prop="department"
                            sortable="custom">
                            <template slot-scope="scope">
                                <span>{{JSON.parse(scope.row.entity).series.contact.department}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" icon="el-icon-view"
                                    @click="showDetails(JSON.parse(scope.row.entity).series.samples)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </div>
                <div class="tablecontent" v-else>
                    <el-table v-loading="loading" :data="zlresultList" @sort-change="handleSortData" border
                        empty-text="No data available at the moment">
                        <el-table-column label="Dataset name" align="left" header-align="center" prop="title"
                            sortable="custom">
                        </el-table-column>
                        <el-table-column label="Dataset Introduction" align="left" header-align="center" prop="summary"
                            show-overflow-tooltip sortable="custom">
                            <template slot-scope="scope">
                                <span>{{JSON.parse(scope.row.entity).series.summary}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="Number of samples" align="right" header-align="center" prop="samples"
                            sortable="custom">
                            <template slot-scope="scope">
                                <span style="color: #409EFF;cursor: pointer;"
                                    @click="showDetails(JSON.parse(scope.row.entity).series.samples)">
                                    {{JSON.parse(scope.row.gdsInfo).sample_count}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="platform" align="left" header-align="center" prop="platforms"
                            sortable="custom">
                            <template slot-scope="scope">
                                <span>{{JSON.parse(scope.row.entity).series.platforms+""}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="Group information" align="left" header-align="center" prop="department"
                            sortable="custom">
                            <template slot-scope="scope">
                                <span>{{JSON.parse(scope.row.entity).series.contact.department}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="operate" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" icon="el-icon-view"
                                    @click="showDetails(JSON.parse(scope.row.entity).series.samples)">view</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </div>
            </div>
        </div>
        <!-- 查看详情 -->
        <el-dialog :title="title" :visible.sync="open" width="1800px" append-to-body>
            <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" label-width="90px"
                v-if="language == 'zh'" style="margin-top: 10px;">
                <el-form-item label="关键词搜索" prop="keyWord"></el-form-item>
                <el-input v-model="queryParams1.keyWord" placeholder="请输入关键词" clearable
                    @keyup.enter.native="handleQuery1" style="width: 200px;" size="small" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1"
                        style="margin-left: 20px;">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
                </el-form-item>
            </el-form>
            <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" label-width="120px" v-else
                style="margin-top: 10px;">
                <el-form-item label="keyword search" prop="keyWord"></el-form-item>
                <el-input v-model="queryParams1.keyWord" placeholder="Please enter keywords" clearable
                    @keyup.enter.native="handleQuery1" style="width: 200px;" size="small" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1"
                        style="margin-left: 20px;">search</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">reset</el-button>
                </el-form-item>
            </el-form>
            <div class="tableContent">
                <el-table v-loading="loading1" :data="detailList" @sort-change="handleSortData1" border
                    v-if="language == 'zh'">
                    <el-table-column label="GSM号" align="center" prop="gsmacc" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="名称" align="center" prop="title" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="状态" align="center" prop="status" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="分类" align="center" prop="type" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="通道数" align="center" prop="channelCount" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="源名称" align="center" prop="sourceNameCh1" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="有机物" align="center" prop="organismCh1" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="特性" align="center" prop="characteristicsCh1" sortable="custom"
                        show-overflow-tooltip />
                    <el-table-column label="平台" align="center" prop="platformId" show-overflow-tooltip/>
                    <el-table-column label="分子" align="center" prop="moleculeCh1" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="提取物协议" align="center" prop="extractProtocolch1" sortable="custom"
                        show-overflow-tooltip />
                </el-table>
                <el-table v-loading="loading1" :data="detailList" @sort-change="handleSortData1" border v-else
                    empty-text="No data available at the moment">
                    <el-table-column label="GSM Number" align="center" prop="gsmacc" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="name" align="center" prop="title" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="state" align="center" prop="status" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="classification" align="center" prop="type" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="Number of channels" align="center" prop="channelCount" sortable="custom" show-overflow-tooltip width="200"/>
                    <el-table-column label="source name" align="center" prop="sourceNameCh1" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="organic compound" align="center" prop="organismCh1" sortable="custom" show-overflow-tooltip width="200"/>
                    <el-table-column label="characteristic" align="center" prop="characteristicsCh1" sortable="custom"
                        show-overflow-tooltip />
                    <el-table-column label="platform" align="center" prop="platformId" show-overflow-tooltip/>
                    <el-table-column label="numerator" align="center" prop="moleculeCh1" sortable="custom" show-overflow-tooltip/>
                    <el-table-column label="Extract Protocol" align="center" prop="extractProtocolch1" sortable="custom"
                        show-overflow-tooltip width="200"/>
                </el-table>
                <pagination v-show="total1>0" :total="total1" :page.sync="queryParams1.pageNum"
                    :limit.sync="queryParams1.pageSize" @pagination="getdetailList" />
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">Cancel</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'HospitalwebsiteIndex',
        props: [],
        components: {},
        data() {
            return {
                language: '',
                // 列表参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    acc: null, // GSE号
                    title: null, // 数据集名称 输入查询
                    dataLanguage: null,  //  zh：中文 / en：英文
                    diseases: null,   //疾病类型数据字典
                    studyTypes: null,   // 研究类型 数据字典
                    sortField: null,  // 排序字段
                    keyWord: null,
                },
                // 详情列表参数
                queryParams1: {
                    pageNum: 1,      //必传
                    pageSize: 10,    //必传
                    keyWord: null,   //非必传-关键字搜索
                    gsmaccs: null,  //必传（逗号隔开的数据）
                    dataLanguage: null, //非必传  中英文
                    sortField: null, //非必传 排序字段
                },
                studyTypeList: [],
                diseasesList: [],
                loading: true,
                loading1: true,
                zlresultList: [],
                detailList: [],
                total: 0,
                total1: 0,
                open: false,
                title: '',
                gsmaccs: ''
            };
        },
        created() {
            this.language = sessionStorage.getItem('language')
            window.addEventListener('setItem', this.languages);
            this.getsearchData()
            this.getList()
        },
        mounted() {

        },
        methods: {
            // 监听session中language的变化
            languages(e) {
                console.log(e, 8888888888888)
                this.language = sessionStorage.getItem('language')
                console.log(this.language, 5555555555)
                this.getList()
                this.getsearchData()
            },
            // 获取搜索条件
            async getsearchData() {
                // 疾病
                this.axios
                    .get('/system/dict/data/list?pageNum=1&pageSize=1000&dictType=mb_jb_type_new').then(res => {
                        this.diseasesList = res.data.rows
                    })
                // 研究类型
                this.axios
                    .get('/system/dict/data/list?pageNum=1&pageSize=1000&dictType=mb_yj_type').then(res => {
                        this.studyTypeList = res.data.rows
                    })
            },
            // 关闭弹窗
            cancel() {
                this.open = false
            },
            showDetails(gsmaccs) {
                this.gsmaccs = gsmaccs + ''
                this.getdetailList()
            },
            getdetailList() {
                this.loading1 = true
                var query = {
                    pageNum: this.queryParams1.pageNum,      //必传
                    pageSize: this.queryParams1.pageSize,    //必传
                    keyWord: this.queryParams1.keyWord,   //非必传-关键字搜索
                    gsmaccs: this.gsmaccs,  //必传（逗号隔开的数据）
                    dataLanguage: this.language, //非必传  中英文
                    sortField: this.queryParams1.sortField, //非必传 排序字段
                }
                this.axios
                    .get('/chronic/sample_details/selectMbSampleDetailsByGsmAcc', { params: query }).then(res => {
                        if (res.data.code == 200) {
                            this.detailList = res.data.rows
                            this.total1 = res.data.total
                        }
                        this.loading1 = false
                    })
                this.open = true
                if (this.language == 'zh') {
                    this.title = '查看数据'
                } else {
                    this.title = 'view data'
                }
            },
            getList() {
                this.loading = true
                var query = {
                    pageNum: this.queryParams.pageNum,
                    pageSize: this.queryParams.pageSize,
                    acc: this.queryParams.acc,
                    title: this.queryParams.title,
                    keyWord: this.queryParams.keyWord,
                    dataLanguage: this.language,
                    diseases: this.queryParams.diseases,
                    studyTypes: this.queryParams.studyTypes,
                    sortField: this.queryParams.sortField,
                }
                this.axios
                    .get('/chronic/zlresults/list', { params: query }).then(res => {
                        if (res.data.code == 200) {
                            this.zlresultList = res.data.rows
                            this.total = res.data.total
                        }
                        this.loading = false
                    })

            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.queryParams = {
                    pageNum: 1,
                    pageSize: 10,
                    acc: null, // GSE号
                    title: null, // 数据集名称 输入查询
                    dataLanguage: null,  //  zh：中文 / en：英文
                    diseases: null,   //疾病类型数据字典
                    studyTypes: null,   // 研究类型 数据字典
                    sortField: null,  // 排序字段
                    keyWord: null,
                }
                this.handleQuery();
            },
            /** 详情搜索按钮操作 */
            handleQuery1() {
                this.queryParams1.pageNum = 1;
                this.getdetailList();
            },
            /** 详情重置按钮操作 */
            resetQuery1() {
                this.queryParams1 = {
                    pageNum: 1,      //必传
                    pageSize: 10,    //必传
                    keyWord: null,   //非必传-关键字搜索
                    dataLanguage: null, //非必传  中英文
                    sortField: null, //非必传 排序字段
                    gsmaccs: this.gsmaccs
                }
                this.handleQuery1();
            },
            //排序监听
            handleSortData(v) {
                let order = '';
                if (v.order) {
                    order = v.order.slice(0, -6)
                }
                if (order) {//排序
                    //GSE号，标题排序
                    if (v.prop == 'acc' || v.prop == 'title') {
                        this.queryParams.sortField = v.prop + " " + order
                    }
                    //样本数量，摘要，平台排序
                    else if (v.prop == 'samples' || v.prop == 'summary' || v.prop == 'platforms') {
                        this.queryParams.sortField = "JSON_EXTRACT(entity, '$.series." + v.prop + "') " + order
                    }
                    //疾病，分组信息排序
                    else if (v.prop == 'diseases' || v.prop == 'study_types') {
                        this.queryParams.sortField = "JSON_EXTRACT(insight, '$." + v.prop + "') " + order
                    }
                } else {//清空排序
                    this.queryParams.sortField = ''
                }
                this.handleQuery()
            },
            handleSortData1(v) {
                let prop = v.prop;
                prop = prop.replace(/([A-Z])/g, "_$1").toLowerCase();
                if (prop[0] == "_") {
                    prop = prop.slice(1);
                }
                let order = ""
                if (v.order) {
                    order = v.order.slice(0, -6)
                }
                if (order) {
                    this.queryParams1.sortField = prop + " " + order;
                } else {
                    //清空排序
                    this.queryParams1.sortField = "";
                }
                this.handleQuery1()
            },
        },
        beforeDestroy() {
            this.language = null
            window.removeEventListener('setItem', this.languages);
        },
    };
</script>
<style scoped>
    .appcontainer {
        width: 100%;
        background-color: #fff;
    }

    .bigimg {
        width: 100%;
        height: 433px;
        padding: 77px 0;
        box-sizing: border-box;
        background-image: url('../../img/sz.png');
        background-size: 100% 100%;
    }

    .inbigimg {
        width: 70%;
        margin: 0 auto;
        position: relative;
    }

    .bigimgtitle {
        font-size: 52px;
        color: #0d48ba;
        margin-bottom: 59px;
    }

    .bigimgtips {
        font-size: 26px;
        line-height: 50px;
        color: #666666;
    }

    .searchContent1 {
        background-color: #fff;
        position: absolute;
        padding: 33px 20px 20px 20px;
        box-sizing: border-box;
        width: 100%;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
        left: 0;
        top: 305px;
    }

    .botcontent {
        width: 100%;
    }

    .inbotcontent {
        width: 70%;
        margin: 0 auto;
    }

    .zlzsjfx {
        margin-top: 86px;
        font-size: 37px;
        margin-bottom: 37px;
    }

    .sjfxtips {
        font-size: 24px;
        color: #666666;
        margin-bottom: 30px;
    }

    .tablecontent {
        padding-bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: end;
    }
</style>